<template>
	<view>
		<nav-custom bgImage="https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">消息列表</block>
		</nav-custom>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" :style="[{height: 'calc(100vh-' + CustomBar + 'px)'}]" @scroll="scroll" :enable-back-to-top="true">
			<view class="chat-list">
				<view class="chat" v-for="(chat,index) in chatList" :key="index">
					<view class="row" @tap="toChat(chat)" @longpress="longTapMsg($event,index)">
						<view class="left">
							<image :src="chat.face"></image>
						</view>
						<view class="right">
							<view class="top">
								<view class="username">{{chat.username}}</view>
								<view class="time">{{chat.time}}</view>
							</view>
							<view class="bottom">
								<view class="msg">{{chat.msg}}</view>
								<view class="tis" v-if="chat.tisNum>0">{{chat.tisNum}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="pop-up-wrap" v-if="poPupState" @tap="topoPupState" @touchmove="topoPupState">
			<view class="pop-up" :style="{left: poPupX ,top: poPupY,}">
				<view class="pop-up-li" @tap="tagRead">{{tagText ? '标记未读' : '标记已读'}}</view>
				<view class="pop-up-li" @tap="topChat" v-if="chatListFirst">置顶聊天</view>
				<view class="pop-up-li" @tap="deleteChat">删除该聊天</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				poPupX: 0, //手指x位置
				poPupY: 0, //手指Y位置
				scrollTop: 0,
				wHeight: Number, //系统高度
				poPupState: false, //弹框显示
				chatListIndex: Number, //第几个
				tagText: Boolean, //标记文字
				chatListFirst: true, //控制第一个状态
				chatList: [{
						uid: 1,
						username: "黄大大的小店",
						face: "/static/img/face/face_1.jpg",
						time: "13:08",
						msg: "亲，20点前下单都是当天送达的",
						tisNum: 1
					},
					{
						uid: 2,
						username: "官店大欺客旗舰店",
						face: "/static/img/face/face_2.jpg",
						time: "13:05",
						msg: "问那么多干什么？不想买就滚~,问那么多干什么？不想买就滚~",
						tisNum: 1
					},
					{
						uid: 3,
						username: "妙不可言",
						face: "/static/img/face/face_3.jpg",
						time: "12:15",
						msg: "推荐一个商品呗？",
						tisNum: 0
					},
					{
						uid: 4,
						username: "茶叶专卖",
						face: "/static/img/face/face_4.jpg",
						time: "12:11",
						msg: "现在卖的都是未过青的茶哦",
						tisNum: 0
					},
					{
						uid: 5,
						username: "likeKiss客服",
						face: "/static/img/face/face_5.jpg",
						time: "12:10",
						msg: "你好，发福建快递多久送到的？",
						tisNum: 0
					},
					{
						uid: 6,
						username: "白开水",
						face: "/static/img/face/face_6.jpg",
						time: "12:10",
						msg: "在吗？",
						tisNum: 0
					},
					{
						uid: 7,
						username: "衣帽间的叹息",
						face: "/static/img/face/face_7.jpg",
						time: "11:56",
						msg: "新品上市，欢迎选购",
						tisNum: 0
					},
					{
						uid: 8,
						username: "景萧疏",
						face: "/static/img/face/face_8.jpg",
						time: "11:56",
						msg: "商品七天无理由退换的",
						tisNum: 0
					},
					{
						uid: 9,
						username: "文宁先生",
						face: "/static/img/face/face_9.jpg",
						time: "12:15",
						msg: "星期天再发货的",
						tisNum: 0
					},
					{
						uid: 10,
						username: "高端Chieh",
						face: "/static/img/face/face_10.jpg",
						time: "12:36",
						msg: "建议你直接先测量好尺码在选购的。",
						tisNum: 0
					},
					{
						uid: 11,
						username: "mode旗舰店",
						face: "/static/img/face/face_11.jpg",
						time: "12:40",
						msg: "新品5折，还有大量优惠券。",
						tisNum: 0
					},
					{
						uid: 12,
						username: "敏萘客服",
						face: "/static/img/face/face_12.jpg",
						time: "12:36",
						msg: "还没有用，等我明天早上试一下",
						tisNum: 0
					},
					{
						uid: 13,
						username: "春天里的花",
						face: "/static/img/face/face_13.jpg",
						time: "12:36",
						msg: "适用于成年人的，小孩不适用的",
						tisNum: 0
					},
					{
						uid: 14,
						username: "电脑外设专业户",
						face: "/static/img/face/face_13.jpg",
						time: "12:36",
						msg: "把上面的螺丝拆下来，把铁片撬开就能看见了",
						tisNum: 0
					},
					{
						uid: 15,
						username: "至善汽车用品",
						face: "/static/img/face/face_15.jpg",
						time: "12:36",
						msg: "这个产品是原车配件，完美装上的",
						tisNum: 0
					}

				]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res);
					// 屏幕宽度、高度
					this.wHeight = res.windowHeight;
				}
			})
		},
		onReady() {
			// uni.createSelectorQuery().select().boundingClientRect(res => {
			//   console.log("height" , res.height);
			// }).exec();
		},
		methods: {
			/**
			 * 滚动容器获取scroll-top
			 */
			scroll(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			/**
			 * 取消弹框
			 */
			topoPupState() {
				this.poPupState = false;
			},
			/**
			 * 标记已读/标记未读
			 */
			tagRead() {
				if (this.tagText) {
					this.chatList[this.chatListIndex].tisNum = 1;
				} else {
					this.chatList[this.chatListIndex].tisNum = 0;
				}
			},
			/**
			 * 置顶聊天
			 */
			topChat(e) {
				let a = new Set([this.chatList[this.chatListIndex]]);
				let b = new Set(this.chatList);
				// this.chatList = Array.from(new Set([...a,...b]));
				this.chatList = [...new Set([...a, ...b])];
				this.$nextTick(function() {
					this.scrollTop = 0
				});

			},
			/**
			 * 删除该聊天
			 */
			deleteChat() {
				this.chatList.splice(this.chatListIndex, 1);
			},
			/**
			 * 长按聊天列表
			 */
			longTapMsg($event, index) {
				let x = $event.changedTouches[0].clientX;
				let y = $event.changedTouches[0].clientY;
				console.log(x, y)
				if (x > (uni.upx2px(750 - 210))) {
					x = uni.upx2px(750 - 210 - 30);
				}
				if (y < (uni.upx2px(40))) {
					y = uni.upx2px(40);
				}
				if (y > (this.wHeight - uni.upx2px(240))) {
					y = this.wHeight - uni.upx2px(240 + 40);
				}
				this.poPupX = x + 'px';
				this.poPupY = y + 'px';
				if (this.chatList[index].tisNum === 0) {
					this.tagText = true;
				} else {
					this.tagText = false;
				}
				if (index === 0) {
					this.chatListFirst = false;
				} else {
					this.chatListFirst = true;
				}
				this.chatListIndex = index;
				this.poPupState = true;
			},
			/**
			 * 去聊天详情页
			 */
			toChat(chat) {
				uni.navigateTo({
					url: "chat?name=" + chat.username
				})
			}
		}
	}
</script>

<style lang="scss">
	.chat-list {
		width: 100%;
		padding: 0 3%;
		box-sizing: border-box;
		position: relative;

		.chat {
			width: 100%;
			height: 140upx;
			padding: 20upx 0;
			border-bottom: solid 1upx #eaeaea;

			.row {
				display: flex;
				justify-content: flex-start;

				.left {
					flex-shrink: 0;
					width: 100upx;
					height: 100upx;

					image {
						width: 100upx;
						height: 100upx;
						border-radius: 20upx;
					}
				}

				.right {
					flex-shrink: 1;
					width: 100%;
					padding-left: 2%;
					overflow: hidden;
					.top {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						height: 50upx;

						.usernam {
							font-size: 26upx;
						}

						.time {
							font-size: 22upx;
							color: #bebebe;
						}
					}

					.bottom {
						width: 100%;
						height: 50upx;
						display: flex;
						align-items: center;
						overflow: hidden;
						.msg {
							flex: 0 0 550upx;
							font-size: 25upx;
							color: #777;
							height: 50upx;
							line-height: 50upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.tis {
							width: 35upx;
							height: 35upx;
							font-size: 22upx;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #eb4d3d;
							color: #fff;
							border-radius: 100%;
						}
					}
				}
			}
		}


	}

	.pop-up-wrap {
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		width: 100%;
		position: fixed;
		z-index: 1;
		top: var(--window-top);
		right: 0;

		.pop-up {
			position: absolute;
			box-shadow: 0 0 20upx 4upx #e7e7e7;
			background-color: #fff;
			width: 210upx;

			.pop-up-li {
				height: 80upx;
				line-height: 80upx;
				padding: 0 30upx;
				font-size: 30upx;
				color: #444;
			}
		}
	}
</style>
